<!-- 课程列表 – 会员			courses -->
<template>
	<view class="pb40">
		<view class="" style="position: sticky;z-index: 999;">
			<view class="bg-fff wd100 " style="height: 80rpx;"></view>
			<view class="flexR aic wd100 bg-fff bb">
				<u-dropdown>
					<u-dropdown-item v-model="morem_val" :title="morem" :options="options1" @change="change">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="bgfc f_x senter">
				<view v-for="(item,index) in fenlei" :key="index" :class="DC==index?'col':''"
					:style="{width:(fenlei.length > 1?'50%':'100%')}" @click="DCs(index)">
					{{item.name}}
				</view>
			</view>
			<!-- 全品选项卡 -->
			<view >
				<u-tabs-swiper :list="list" :is-scroll="false"  :current="current" @change="tabsChange"></u-tabs-swiper>
			</view>
		</view>

		<!-- 列表 -->
		<view class="" style="z-index: 1;" v-if="contentlist != ''">
			<view class="bb p15" @click="toMbiaoti(item.id)" v-for="(item,index) in contentlist" :key="index">
				<view class=" f b">
					<view>
						<image style="width: 250rpx;height: 150rpx;" :src="item.img" class="br5" mode="widthFix"></image>
					</view>
					<view class="vw55 f d ml5">
						<view class="fs28 bold ellipsis" :class="{'sijiao': item.type==2&& item.dxc == 2}">{{item.name}}</view>
						<view class="fs20 hui p_t_10 ellipsis">{{item.title}}</view>
						<view class="fs26" v-if="item.type == 2 && item.dxc == 2">
							<view class="mt5">
								<text class="hui ">集体卡：{{item.jtk_xk_num}}课时</text>
							</view>
							<view class="f b">
								<view class="">
									<text class="hui sijiao">私教卡：{{item.xk_num}}课时</text>
								</view>
								<view class="information-buts " @click.stop="appointment(item.id)">
									<button type="default" class="bg_sijiao">立即预约</button>
								</view>
							</view>
						</view>
						<view class="fs26" v-else>
							<view class="f b mt20">
								<view class="">
									<text class="hui">价格：{{item.xk_num}}课时</text>
								</view>
								<view class="information-buts " @click.stop="appointment(item.id)">
									<button type="default">立即预约</button>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		<view class="dis-flex flex-align-center flex-center" style="height: 1000rpx;" v-else>
			<u-empty text="列表为空" mode="list"></u-empty>
		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				txt: '默认门店', //默认门店
				show: false,
				shop: false,
				morem_val: '', //默认门店选中
				fenlei_id: '',
				morem: '',
				options1: [],
				fenlei: [],
				contentlist: [],
				DC: 0, //  0:大池   1:小池
				list: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '全部课程'
			})
			var suo = uni.getStorageSync('suo');
			if (suo) {
				uni.removeStorageSync('suo');
			} else {
				var token = uni.getStorageSync('token');
				if(token){
					this.DC = 0
					this.current =0
					this.init()
				}
				
			}
			
			// this.contentlist = []
		},
		onPullDownRefresh:function(){
			this.DC = 0
			this.current =0
			this.init();
			setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1500);
		},
		methods: {
			init() {
				var that = this
				var city = uni.getStorageSync('city');
				if (city) {
					var chengshi = city
				} else {
					var chengshi = '北京市';
				}
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						var js = {
							city: chengshi,
							lat: res.latitude,
							lng: res.longitude
						}
						that.$http.post(that.$config.UrlPoststoreList, js).then((res) => {
							if (res.status == 1) {
								var list = res.data
								var data = []
								for (let i = 0; i < list.length; i++) {
									let arr = new Object()
									arr.value = list[i]['id']
									arr.label = list[i]['name']
									data.push(arr)
									if (list[i]['is_xuan'] == 1) {
										that.morem = list[i]['name']
										that.morem_val = list[i]['id']
									}
								}
								that.options1 = data
								setTimeout(() => {
									that.huoqufenlei()
								}, 500)

							}
						})
					},
					fail: function(e){
						that.$api.alert("请开启手机定位服务,才能查看附近门店")
					}
				});




			},
			//获取分类
			huoqufenlei() {
				var that = this
				var json = {
					id: that.morem_val
				}
				that.$http.post(that.$config.UrlPostclassifyList, json).then((res) => {
					if (res.status == 1 && res.data) {
						that.fenlei = res.data
						that.fenlei_id = res.data[0]['children'][0].id
						that.list = res.data[0]['children']
						that.content()
					}
				})
			},
			//课程列表
			content() {
				var that = this
				var json = {
					id: that.fenlei_id
				}
				that.$http.post(that.$config.UrlPostcourseList, json).then((res) => {
					if (res.status == 1) {
						that.contentlist = res.data
					}
				})
			},
			//点击门店切换
			change(e) {
				var that = this
				var json = {
					id: e
				}
				that.$http.post(that.$config.UrlPostsetDefault, json).then((res) => {
					if (res.status == 1) {
						that.fenlei = ''
						that.fenlei_id = ''
						that.list = ''
						that.contentlist = []
						that.huoqufenlei()
						var data = that.options1
						for (let i = 0; i < data.length; i++) {
							if(e == data[i]['value']){
								that.morem = data[i]['label']
								that.morem_val = data[i]['value']
							}
						}
						

					}
				})
			},
			// 预约
			appointment(id) {
				uni.setStorageSync('suo', true);
				var token = uni.getStorageSync('token');
				if(token){
					uni.navigateTo({
						url:"/pages/courses/immediately/immediately?id=" + id
					})
				}else{
					this.$api.openWindow('/pages/login/login')
				}
			},

			DCs(e) {
				this.DC = e
				this.current = 0
				this.list = this.fenlei[e].children
				this.fenlei_id = this.fenlei[e].children[0]['id']
				this.content()
			},

			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
				this.fenlei_id = this.fenlei[this.DC].children[index]['id']
				this.content()
			},
			toMbiaoti(id) {
				uni.setStorageSync('suo', true);
				uni.navigateTo({
					url: '../index/Details/Details?id=' + id
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style scoped>
	
	.custo {
		height: 300rpx;
	}

	.whites {
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100vw;
		margin-top: 100rpx;
	}

	.cover {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background: #000000;
		opacity: 0.6;
		z-index: 10;
	}

	.warps {
		/* height:180vh; */
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.f_x {
		display: flex;
	}

	.bgfc {
		width: 750rpx;
		height: 68rpx;
		line-height: 68rpx;
		opacity: 1;
		background: #f3f3f3;
	}

	.col {
		color: #1F73F2;
	}

	.information-buts>button {
		width: 155rpx;
		height: 48rpx;
		line-height: 48rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 200rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.Details-huod {
		width: 432rpx;
		height: 556rpx;
		opacity: 1;
		background: #ffffff;
		position: absolute;
		top: 300rpx;
		left: 160rpx;
		z-index: 11;
	}

	.Details-guan {
		position: absolute;
		top: 950rpx;
		left: 340rpx;
		z-index: 11;
	}

	.shop_he {
		padding: 60rpx;
		margin-top: 100rpx;
	}

	.shop_tu {
		width: 34rpx;
		height: 34rpx;
		margin-left: 30rpx;
	}

	.shop_zi {
		font-size: 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #F3F3F3;
	}

	.shop_xz {
		color: #1F73F2;
	}

	.choice {
		width: 22rpx;
		height: 22rpx;
		margin-left: 30rpx;
	}

	.triangle_tu {
		margin-left: 20rpx;
		width: 22rpx;
		height: 20rpx;
	}

	.shows_hint {
		width: 622rpx;
		height: 394rpx;
		background: #ffffff;
		border-radius: 16rpx;
	}

	.shows_ipt {
		width: 334rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 2rpx solid #dcdcdc;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.shows_ipt>input {
		padding-top: 6rpx;
	}
	.sijiao{
		color:#FF8C23!important;
	}
	.bg_sijiao{
		background-color:#FF8C23!important;
	}
</style>
